const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
//const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
//在配置文件中默认获取不到这个process.env.NODE_ENV=undefined
module.exports = {
    mode: 'development',
   /*  optimization: {
        minimize: true,//启用最小化
        minimizer: [
            new TerserPlugin()//UglifyJS 压缩JS
        ]
    }, */
    devtool: false,
    /* entry:{
         main:'./src/index.js',
        vendor:['lodash']
        entry1:'./src/entry1.js',
        entry2:'./src/entry2.js'
    }, */
    entry: './src/index.js',
    /*  entry:{
          index1:path.resolve(__dirname,'./src/index1.js'),//源文件肯定在当前目录中
          index2:'./src/index2.js'
      }, */
    output: {
        path: path.resolve(__dirname, 'dist'),//打包后输出的文件可以是硬盘上的任意位置
        filename: '[name].[chunkhash:8].js',
        //因为我们打包后的文件可能会通过网络传递到另一个方法
        //publicPath:'http://CDNIP//static' //公开访问路径 
    },
    /* watch:true,//开启监控模式
    watchOptions:{
        ignored:/(node_modules|node_modules2)/,//忽略变化的文件夹
        //监听到变化发生后会等300再去执行 其实是一个防抖的优化
        aggregateTimeout:300,
        poll:1000 //每秒问操作系统多少次文件是否已经 变量
    }, */
    //这是一个选项，是用来配置开发服务器的
    devServer: {
        hot: true,//配置模块的热更新
        //真实的含义是配置额外的静态文件根目录，不用配置dist，dist本来就能用
        contentBase: path.resolve(__dirname, 'public'),
        compress: true,//启动压缩 gzip
        port: 8080,
        open: true,//启动之后自动打开浏览器
        before(app) {//webpack-dev-server本质是一个express服务器 app
            /*  app.get('/main.js',(req,res)=>{
                 res.json([{"name": "zhufengBefore","age": 12}]);
             }); */
        },
        //中间就是静态文件就 产出的文件
        after(app) {//webpack-dev-server本质是一个express服务器 app
            /*  app.get('/main.js',(req,res)=>{
                 res.json([{"name": "zhufengAfter","age": 12}]);
             }); */
        }
        /*  proxy:{
             '/api':{
                 target:'http://localhost:3000',
                 pathRewrite:{
                     '^/api':''
                 }
             }
         } */
    },
    /*   alias:{
          '~':path.resolve(__dirname,'src'),
          '@':path.resolve(__dirname,'src'),
      }, */
    //对于除了JS和JSON之外的文件，要想让webpack能认识，需要配置loader
    //loader加载器可以把webpack不认识的模块转换成webpack认识的模块 js
    /*  externals:{
         lodash:'_', // 如果在模块内部引用了lodash这个模块，会从 window._上取值
         jquery:'jQuery' // 如果在模块内部引用了jquery这个模块，会从 window.jQuery上取值
     }, */
    module: {
        rules: [
            {
                test: require.resolve('lodash'),
                loader: 'expose-loader',
                options: {
                    exposes: {
                        globalName: '_',
                        override: true
                    }
                }
            },
            {
                test: /\.jsx?$/,
                use: [{
                    loader: 'eslint-loader',
                    options: { fix: true },
                }]
                ,
                enforce: 'pre',
                exclude: /node_modules/ //对于node_modules里面的模块的不需要检查代码
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                

                            ], "@babel/preset-react"],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { legacy: true }],
                            ["@babel/plugin-proposal-class-properties", { loose: true }]
                        ]
                    }

                }
            },
            {
                test: /\.txt$/,
                type: 'asset/source' //表示这是一个普通 资源，直接加载就可以
                //use:['raw-loader']
            },
            {
                test: /\.css$/,
                //最后一个loader,就上面最左边的loader一定要返回一个JS脚本
                //1读取CSS内容给css-loader
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {//如果不配的话默认值是0
                            importLoaders: 1
                        }//对于包含的CSS文件而言，要使用前面的几个loader来处理
                    }, 'postcss-loader',{
                        loader:'px2rem-loader',
                        options:{
                            remUnit:150,// 一个REM是多少个像素
                            remPrecision:8//计算REM的单位，保留几位小数 设置精度
                        }
                    }]
            },
            {
                test: /\.less$/,
                //最后一个loader,就上面最左边的loader一定要返回一个JS脚本
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {//如果不配的话默认值是0
                        importLoaders: 0
                    }//对于包含的CSS文件而言，要使用前面的几个loader来处理
                }, 'postcss-loader', 'less-loader']
            },//js import require
            {
                test: /\.scss$/,
                //最后一个loader,就上面最左边的loader一定要返回一个JS脚本
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|png|bmp|gif|svg)$/,
                //type:'asset' //相当于原来的 file-loader
                use: [
                    {   //url-loader可以把一些小图片变成 base64字符串内嵌在页面中
                        loader: 'url-loader',
                        options: {
                            //name:'[hash:10].[ext]',
                            esModule: false,//是否包装成一个ES6模块 Module.default
                            limit: 8 * 1024, //8K
                            outputPath: 'images',//指定写入到输出目录里images里
                            publicPath: '/images'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
            /* {
                test:/\.html$/,
                loader:'html-loader'
            } */
        ]
    },
    plugins: [
        //插件可以插入webpack打包整个流程，执行
        //这个插件会向输出目录写入一个index.html文件，并且会入文件里插入打包后的脚本
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {//压缩HTML
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css',
        }),
        //new OptimizeCssAssetsWebpackPlugin(),//压缩CSS
        //这是一个定义全局变量的插件
        //并不是构建了一个全局变量window.不是这样的。而就是一个字符串替换
        new webpack.DefinePlugin({
            //'process.env.NODE_ENV':isDevelopment?'development':'production'
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        //不再让webpack在我们生成 sourcemap
        /* new webpack.SourceMapDevToolPlugin({
            //会在打包后文件的尾部添加一行这样的文件
            append:`\n//# sourceMappingURL=http://127.0.0.1:8080/[url]`,
            filename:'[file].map' //main.js.map
        }), *///文件管理插件，可以帮我们拷贝代码，删除 代码
        /* new FileManagerPlugin({
            events:{
                onEnd:{
                    copy:[
                        {
                            source:'./dist/*.map',
                            destination:'C:/aproject/zhufengwebpack202103/maps'
                        }
                    ],
                    delete:['./dist/*.map']
                }
            }
        }) */
        //会自动向模块内部注入lodash模块,在模块内部可以通过_引用
        /*  new webpack.ProvidePlugin({
             '_':'lodash'
         }) */
        //这个模块现在不能用了，版本冲突。等我们讲插件的时候，我们可以基于最新的版本写一个HtmlWebpackExternalsPlugin
        /*  new HtmlWebpackExternalsPlugin({
             externals:[
                 {
                     module:'lodash',//模块名
                     entry:'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js',
                     global:'_'//全局变量名
                 },
                 {
                     module:'jquery',
                     entry:'https://cdn.bootcss.com/jquery/3.4.1/jquery.js',//CDN脚本地址
                     global:'jQuery'
                 }
             ]
         }) */
        /*  new CopyWebpackPlugin({
             patterns:[
                 {
                     from:path.resolve(__dirname,'src/design'),
                     to:path.resolve(__dirname,'dist/design')
                 }
             ]
         }), */
        new CleanWebpackPlugin({//再重新打包前先把输出目录 清空一下
            cleanOnceBeforeBuildPatterns: ['**/*']
        })
    ]
}